.user-info
  max-width: 150px
  padding: 0 20px
  height: 100%
  background-color: transparent
  cursor: pointer
  display: flex
  align-items: center
  position: relative
  transition: all .4s
  .user-info-list
    width: 200px
    padding: 10px 0
    height: auto
    position: absolute
    right: 0
    box-shadow: 0 5px 10px #d2d5d9
    border-bottom-left-radius: 3px
    border-bottom-right-radius: 3px
    z-index: 10
    .user-info-item
      width: 100%
      height: 40px
      padding: 0 10px
      display: flex
      align-items: center
      background-color: transparent
      &:hover
        background-color: rgba(0,0,0,0.2)
      .icon
        width: 40px
        height: 40px
        display: flex
        align-items: center
        justify-content: center
        color: #666
      .text
        color: #666
  &:hover
    background-color: #4f698c
    .avatar > img
      transform: rotate(360deg)
    .username,.triangle
      color: #ffffff
  .avatar
    width: 30px
    height: 30px
    border-radius: 30px
    background-color: #ffffff
    > img
      width: 100%
      height: 100%
      border-radius: 100%
      transition: transform .5s
      transform: rotate(0deg)
  .username
    font-size: 14px
    margin-left: 5px
  .triangle
    width: 20px
    height: 20px
    font-size: 12px
    margin-left: 5px
    transform: rotate(0deg)
    transition: transform .3s
    display: flex
    align-items: center
    justify-content: center
    &.open
      transform: rotate(-180deg)
